/*
Overlay
================================================
Creates a fixed full-screen overlay.

The `js--overlay` element is used when a modal window is shown.

The `js--overlay` element is empty while the html of the modal box will be created just before the closing body-tag.

The opacity of the full-screen overlay can be modified with javascript.

The functionality is provided by the `jquery.overlay.js` file.

```
<div class="js--overlay" style="opacity: 0.8; display: block; cursor: pointer;"></div>
```

default color:`#000000` default opacity (alpha):`0.7`
*/

.js--overlay-relative {
    position: relative;
}

.js--overlay {
    .transition(~"opacity 0.45s cubic-bezier(.3,0,.15,1), visibility 0.45s linear");
    .tap-highlight-color();
    .transform(translateZ(0));
    .opacity(0.01);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: @zindex-overlay;
    visibility: hidden;

    &.theme--dark {
        background: rgba(red(@overlay-theme-dark-bg), green(@overlay-theme-dark-bg), blue(@overlay-theme-dark-bg), @overlay-opacity);
    }

    &.theme--light {
        background: rgba(red(@overlay-theme-light-bg), green(@overlay-theme-light-bg), blue(@overlay-theme-light-bg), @overlay-opacity);
    }

    &.is--open {
        .transition-delay(0);
        .opacity(1);
        visibility: visible;
    }

    &.is--closable {
        cursor: pointer;
    }
}

body > .js--overlay {
    position: fixed;
}